<template>
  <div class="BlogList">
    <Header></Header>
    <layout class="content">
      <Row>
        <Col span="18">
          <Col span="24">
            <div class="whitebg lanmu">
              <img src="https://img0.baidu.com/it/u=3018764486,3204354308&fm=26&fmt=auto&gp=0.jpg" />
              <h1>程序员的故事</h1>
              <p>
                他们很神秘,他们很简单。他们很无趣他们很逗比。他们很聪明,他们很疲惫1024写最接地气。傻瓜式的问题：你来帮我修修电脑呗，啊！你不会？
                你不是计算机专业吗？怎么可能不会。
              </p>
            </div>
          </Col>
          <Col span="24" class="bloglist">
            <div class="layui-col-xs12 whitebg">
              <h2 class="htitle">最新博文</h2>
              <ul>
                <li>
                  <div class="blogtitle">
                    <router-link to="" title="css+jquery实现美化的switch开关">
                      css+jquery实现美化的switch开关
                    </router-link>
                  </div>
                  <span class="blogpic imgscale">
                    <a href="" title="">
                      <img
                        src="https://blog.yzmcms.com/uploads/thumbnail/20160706200134550.jpg"
                        alt=""
                      />
                    </a>
                  </span>
                  <p class="blogtext">
                    没有用插件，利用label +
                    radio特性做了一个switch开关，代码简洁易懂，可以集成到项目里，美化radio，完整代码分享...
                  </p>
                  <p class="bloginfo">
                    <i class="avatar"
                      ><img
                        src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                    ><span>大坤</span>
                    <span>2020-5-10</span>
                  </p>
                  <router-link to="" title="阅读更多" class="viewmore">
                    阅读更多</router-link
                  >
                </li>
                <li>
                  <div class="blogtitle">
                    <router-link
                      to=""
                      title="前端进阶算法1：如何分析、统计算法的执行效率和资源消耗？"
                    >
                      前端进阶算法1：如何分析、统计算法的执行效率和资源消耗？
                    </router-link>
                  </div>
                  <span class="blogpic imgscale">
                    <a href="" title="">
                      <img
                        src="https://www.zhangqinblog.com//files/lifeDribs/images/2020-4-1.jpg"
                        alt=""
                      />
                    </a>
                  </span>
                  <p class="blogtext">
                    前端还要学算法？必须学，而且必须狠狠地学。现在去大厂面试，数据结构与算法已经是标配，要是不会的话，那基本与大厂无缘了。
                    作为一名前端，虽然在平常开发中很少写算法，但当我们需要深入前端框架、开发语言、开源库时，懂算法将大大提高我们看源码的能力。
                    例如 react 的 diff 算法、webpack 中利用 tree-shaking
                    优化、v8
                    中的调用栈、消息队列等，这些就大量使用了算法，看懂了就能更好的了解它们的性能，更高效的解决问题，进阶到更高
                    Level，赚更多钱。
                  </p>
                  <p class="bloginfo">
                    <i class="avatar"
                      ><img
                        src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                    ><span>大坤</span>
                    <span>2020-5-10</span>
                  </p>
                  <router-link to="" title="阅读更多" class="viewmore">
                    阅读更多</router-link
                  >
                </li>
                <li>
                  <div class="blogtitle">
                    <router-link to="" title="知足知福，才会长乐人生。">
                      知足知福，才会长乐人生。
                    </router-link>
                  </div>
                  <span class="blogpic imgscale">
                    <a href="" title="">
                      <img
                        src="https://www.zhangqinblog.com//files/lifeDribs/images/2019-9-6.jpg"
                        alt=""
                      />
                    </a>
                  </span>
                  <p class="blogtext">
                    老子在《道德经》中曰:上善若水，水善利万物而不争。处众人之所恶，故几于道。居善地，心善渊，与善仁，言善信，政善治，事善能，动善时。
                    夫唯不争，故无尤。生活在滚滚红尘，总会遇到形形色色的人。我们改变不了别人，那就先改变自己，做一个上善若水，任由方圆的人，这是大气，也是智慧。知足知福，才会长乐人生。
                  </p>
                  <p class="bloginfo">
                    <i class="avatar"
                      ><img
                        src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                    ><span>大坤</span>
                    <span>2020-5-10</span>
                  </p>
                  <router-link to="" title="阅读更多" class="viewmore">
                    阅读更多</router-link
                  >
                </li>
                <li>
                  <div class="blogtitle">
                    <router-link to="" title="微信小程序之购物车功能">
                      微信小程序之购物车功能
                    </router-link>
                  </div>
                  <span class="blogpic imgscale">
                    <a href="" title="">
                      <img
                        src="https://img0.baidu.com/it/u=525068942,3518407795&fm=26&fmt=auto&gp=0.jpg"
                        alt=""
                      />
                    </a>
                  </span>
                  <p class="blogtext">
                    以往的购物车，基本都是通过大量的 DOM
                    操作来实现。微信小程序其实跟 vue.js
                    的用法非常像，接下来就看看小程序可以怎样实现购物车功能。
                  </p>
                  <p class="bloginfo">
                    <i class="avatar"
                      ><img
                        src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                    ><span>大坤</span>
                    <span>2020-5-10</span>
                  </p>
                  <router-link to="" title="阅读更多" class="viewmore">
                    阅读更多</router-link
                  >
                </li>
                <li>
                  <div class="blogtitle">
                    <router-link to="" title="HTML5 进阶系列：web Storage">
                      HTML5 进阶系列：web Storage
                    </router-link>
                  </div>
                  <span class="blogpic imgscale">
                    <a href="" title="">
                      <img
                        src="https://img2.baidu.com/it/u=1165365399,76820909&fm=26&fmt=auto&gp=0.jpg"
                        alt=""
                      />
                    </a>
                  </span>
                  <p class="blogtext">
                    HTML5 的 web Storage 存储方式有两种：localStorage 和
                    sessionStorage。
                    这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的用法相同，存储时间不同。
                    localStorage
                    的数据保存在本地硬件上，可以永久保存，可以手动调用api清除数据。sessionStorage
                    保存在 session 对象中，会在浏览器关闭时被清除。
                  </p>
                  <p class="bloginfo">
                    <i class="avatar"
                      ><img
                        src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                    ><span>大坤</span>
                    <span>2020-5-10</span>
                  </p>
                  <router-link to="" title="阅读更多" class="viewmore">
                    阅读更多</router-link
                  >
                </li>
                <li>
                  <div class="blogtitle">
                    <router-link to="" title="带缩略图的产品放大镜jquery插件">
                      带缩略图的产品放大镜jquery插件
                    </router-link>
                  </div>
                  <span class="blogpic imgscale">
                    <a href="" title="">
                      <img
                        src="https://img2.baidu.com/it/u=180921154,4092656944&fm=26&fmt=auto&gp=0.jpg"
                        alt=""
                      />
                    </a>
                  </span>
                  <p class="blogtext">
                    有学生要仿电商网站，需要一个带缩略图的产品放大镜的插件，我觉得这个还不错，推荐给大家。
                    这个插件有好几种效果，但是在初始化插件的时候，把几种效果的初始化放在一个js文件里面了，所以我专门做了一个案例，提取了一个效果，可供大家参考。
                  </p>
                  <p class="bloginfo">
                    <i class="avatar"
                      ><img
                        src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                    ><span>大坤</span>
                    <span>2020-5-10</span>
                  </p>
                  <router-link to="" title="阅读更多" class="viewmore">
                    阅读更多</router-link
                  >
                </li>
              </ul>
            </div>
            <PageList></PageList>
          </Col>
        </Col>
        <Col span="6" style="padding-left: 20px">
          <Col span="24">
            <TAG></TAG>
            <GuseeLike></GuseeLike>
            <Ranking></Ranking>
            <Recommend></Recommend>
          </Col>
        </Col>
      </Row>
    </layout>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Ranking from "@/components/list/Ranking";
import Recommend from "@/components/list/Recommend";
import TAG from "@/components/list/TAG";
import GuseeLike from "@/components/list/GuseeLike";
import PageList from "@/components/public/PageList";

export default {
  name: "BlogList",
  components: {
    PageList,
    GuseeLike,
    TAG,
    Recommend,
    Ranking,
    Footer,
    Header,
  },
  data() {
    return {};
  },
  created() {
    // alert(this.$route.path +'--'+ this.$route.name)
  },
  methods: {},
};
</script>

<style scoped>
</style>
